<template>
    <div class="main">
        <img :src="item.pic" alt="">
        <div>
            {{ item.name }}
        </div>
        <div style="text-align: center;">
            价格：{{ item.minPrice }}
        </div>
        <button @click="add(item)">添加购物车</button>
    </div>
</template>

<script>
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
    props: ['item'],
    setup() {
        const { commit } = useStore()
        const { push } = useRouter()
        const add = (value) => {
            commit('add', value)
            push('/about')
        }

        return { add }
    }
}
</script>

<style lang="scss" scoped>
.main {
    width: 48%;
    height: 400px;
    background-color: #ccc;
    margin: 4px 0;

    >img {
        width: 100%;
        height: 240px;

    }
}
</style>